<template>
  <div class='box'> 
    <div class="jg">
        <el-input v-model="input.value" readonly ></el-input>
    </div>
    <el-button v-for="(item,index) in Data" :key="item.id"  @click="operator(index)" >
      {{item.name}}
    </el-button> 
  </div>  
</template>

<script>
export default {
  name: "operator",
  data() {
    return {
      toggle: true,
      Data: [
        { name: "C" },
        { name: "←" },
        { name: "+" },
        { name: "-" },
        { name: "7" },
        { name: "8" },
        { name: "9" },
        { name: "x" },
        { name: "4" },
        { name: "5" },
        { name: "6" },
        { name: "÷" },
        { name: "1" },
        { name: "2" },
        { name: "3" },
        { name: "%" },
        { name: "." },
        { name: "0" },
        { name: "+/-" },
        { name: "=" }
      ],
      input: {
        value: "0",
        status: "1" /*f - l = */,
        type: "",
        firstSting: "",
        lastSting: "",
        lastClick: ""
      }
    };
  },
  methods: {
    operator(index) {
      var c = this.Data[index].name;
      var i = this.input.value;
      var _i = typeof i == "number" ? i + "" : i;
      if (_i.indexOf(".") > -1 && c >= 0) {
        this.input.value += c;
        return;
      }
      if (c >= 0) {
        if (this.input.firstSting != "" && this.input.lastSting != "") {
          this.input.firstSting = "";
          this.input.lastSting = "";
          this.input.value = c;
          this.input.type = "";
          this.input.status = "2";
          return;
        }
        if (this.checkString() || i == 0 || this.input.status == "4") {
          this.input.value = c;
          this.input.status = "1";
        } else {
          this.input.value += c;
          this.input.status = "1";
        }
      } else {
        switch (c) {
          case "+":
          case "-":
          case "x":
          case "÷":
            if (this.input.type == "") {
              this.input.firstSting = i;
            }
            this.input.status = "3";
            this.input.type = c;
            this.input.value = c;
            this.input.firstSting = i;
            break;
          case "=":
            this.total();
            break;
          case "←":
            if (this.checkString() || i == 0) {
              this.input.value = "";
              this.input.type = "";
              this.$emit("result", this.input.value);
              return;
            }
            i = typeof i == "number" ? i + "" : i;
            var del = i.substring(0, i.length - 1);
            if (del.substr(-1) == ".") {
              del = del.substring(0, del.length - 1);
            }
            del = del == "" ? "0" : del;
            this.input.value = del;
            this.input.status = "3";
            break;
          case "%":
            if (this.checkString() || i == 0) {
              return;
            }
            var p = parseFloat(i) / 100;
            p = p == "Infinity" ? 0 : p;
            this.input.value = p;
            this.input.status = "3";
            break;
          case "+/-":
            if (this.checkString() || i == 0) {
              return;
            }
            this.input.value = -i;
            this.input.status = "3";
            break;
          case ".":
            i = typeof i == "number" ? i + "" : i;
            if (!this.checkString() && i.indexOf(".") == -1) {
              this.input.value = i + ".";
              this.input.status = "3";
            }
            break;
          case "C":
            this.input.type = "";
            this.input.status = "1";
            this.input.value = "0";
            this.input.firstSting = "";
            this.input.lastSting = "";
            break;
          default:
            break;
        }
      }
      this.$emit("result", this.input.value);
    },
    total() {
      var i = this.input.value;
      if (this.checkString() || i == 0) {
        this.input.lastSting = 0;
      } else {
        this.input.lastSting = i;
      }

      if (this.input.status == "4") {
        this.input.value = "0";
        return;
      }

      this.input.firstSting =
        this.input.firstSting == "" ? 0 : this.input.firstSting;
      this.input.lastSting =
        this.input.lastSting == "" ? 0 : this.input.lastSting;
      if (!this.input.type) {
        this.input.firstSting = i;
        this.input.lastSting = "";
        return;
      }
      if (this.input.type == "+") {
        var t =
          parseFloat(this.input.firstSting) + parseFloat(this.input.lastSting);
        this.input.value = t;
      } else if (this.input.type == "-") {
        var t =
          parseFloat(this.input.firstSting) - parseFloat(this.input.lastSting);
        this.input.value = t;
      } else if (this.input.type == "x") {
        var t =
          parseFloat(this.input.firstSting) * parseFloat(this.input.lastSting);
        this.input.value = t;
      } else if (this.input.type == "÷") {
        if (this.input.lastSting == 0) {
          this.input.value = "0";
          return;
        }
        var t =
          parseFloat(this.input.firstSting) / parseFloat(this.input.lastSting);
        this.input.value = t;
      }
      this.input.value =
        isNaN(this.input.value) ||
        this.input.value == "Infinity" ||
        this.checkString()
          ? 0
          : this.input.value;
      this.input.status = "4";
      this.input.firstSting = this.input.value;
      this.input.lastSting = "";
    },
    checkString() {
      var i = this.input.value;
      if (i == "+" || i == "-" || i == "x" || i == "÷") {
        return true;
      } else {
        return false;
      }
    },
    keyoperator(ev) {
      var keyCode = ev.keyCode;
      console.log(keyCode);
      switch (keyCode) {
        case 48:
        case 49:
        case 50:
        case 51:
        case 52:
        case 53:
        case 54:
        case 55:
        case 56:
        case 57:
        case 96:
        case 97:
        case 98:
        case 99:
        case 100:
        case 101:
        case 102:
        case 103:
        case 104:
        case 105:
          for (let i in this.Data) {
            if (this.Data[i].name == keyCode - 96) {
              this.operator(i);
            }
            if (this.Data[i].name == keyCode - 48) {
              this.operator(i);
            }
          }
          break;
        case 107:
          this.operator(2);
          break;
        case 8:
          this.operator(1);
          break;
        case 109:
          this.operator(3);
          break;
        case 110:
          this.operator(16);
          break;
        case 13:
        case 187:
          this.operator(19);
          break;
        case 107:
          this.operator(2);
          break;
        case 106:
          this.operator(7);
          break;
        case 111:
          this.operator(11);
          break;
      }
    }
  },
  mounted() {
    var _this = this;
    document.onkeydown = function(event) {
      _this.keyoperator(event);
    };
  }
};
</script>
<style>
.box {
  width: 320px;
  margin: 0 auto;
  text-align: left;
}
.jg {
  width: 100%;
  min-height: 80px;
}
.box .el-button {
  width: 80px;
  height: 80px;
  margin-left: 0;
  font-size: 18px;
  /* font-weight: 900; */
}
.el-input__inner {
  height: 80px;
  box-sizing: border-box;
  font-size: 24px;
  text-align: right;
}
</style>
